<!DOCTYPE html>
<html>
<head>
    <title>SelectPage使用实例</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCore.css" type="text/css">
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
	
	<link rel="stylesheet" href="../lib/selectpage/selectpage.bootstrap3.css" type="text/css">
    
	<link rel="stylesheet" href="../css/header.css" />
	<link rel="stylesheet" href="../css/demo.css" />
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-4688926342467996",
    enable_page_level_ads: true
  });
</script>
</head>

<body>
    <header class="navbar navbar-static-top" id="top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="https://terryz.oschina.io/selectpage/index.html" class="navbar-brand">SelectPage</a>
        </div>
        <nav id="bs-navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a href="guide.html" >入门</a>
                </li>
                <li class="active">
                    <a href="javascript:void(0);" >实例</a>
                </li>
                <li>
                    <a href="docs.html" >文档</a>
                </li>
                <li>
                    <a href="changelog.html" >更新记录</a>
                </li>
                <li>
                    <a href="message.html" >留言/反馈</a>
                </li>
                <li>
                    <a href="https://terryz.oschina.io" >Home</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="https://github.com/TerryZ/SelectPage" target="_blank"><i class="fa fa-lg fa-github"></i> Fork on Github</a></li>
            </ul>
        </nav>
    </div>
    </header>


	<div class="content">
	<div class="container" >
		<h1 class="heading">下拉分页控件 <small>支持下拉，分页，键盘操作等功能</small></h1>
		<div class="row-fluid">
			<h4 class="heading">1.基本初始化 <small></small></h4>
			<input type="text" id="selectPage" class="" placeholder="请输入查询关键字" >
			<button type="button" class="btn btn-default" id="func1"><i class="fa fa-file-text-o"></i> 获得选中项目的文本内容</button>
			<button type="button" class="btn btn-default" id="func2"><i class="fa fa-ban"></i> 清除所有选中的项目</button>
			<button type="button" class="btn btn-default" id="func3"><i class="fa fa-check-square-o "></i> 动态修改选中项目</button>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//表单声明元素
<input type="text" id="selectPage" >
//定义数组，在服务端返回的数据也以该格式返回：Array[{Object},{...}]
var tag_data = [
	{id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
	{id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
	{id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
	{id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//showField：设置下拉列表中显示文本的列
//keyField：设置下拉列表项目中项目的KEY值，用于提交表单
//data：数据源，可以是JSON数据格式，也可以是URL
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data
});
//获得选中项目的文本内容
$('#func1').click(function(){
	alert($('#selectPage').selectPageText());
});
//清除所有选中的项目
$('#func2').click(function(){
	$('#selectPage').selectPageClear();
});
//动态修改选中项目
$('#func3').click(function(){
	$('#selectPage').val('20');
	$('#selectPage').selectPageRefresh();
});
]]>
</script>
		</div>

        <div class="row-fluid">
            <h4 class="heading">2.仅选择模式 <small>设置关闭分页，列表显示高度等</small></h4>
            <input type="text" id="selectPageSelectOnly" class="form-control" placeholder="请输入查询关键字" >
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//将插件设置成纯下拉列表模式
$('#selectPageSelectOnly').selectPage({
    showField : 'name',
    keyField : 'id',
    data : tag_data,
    //仅选择模式，不允许输入查询关键字
    selectOnly : true,
    //关闭分页栏，数据将会一次性在列表中展示，上限200个项目
    pagination : false,
    //关闭分页的状态下，列表显示的项目个数，其它的项目以滚动条滚动方式展现（默认10个）
    listSize : 10,
    multiple : true
});
]]>
</script>
        </div>

		<div class="row-fluid">
			<h4 class="heading">3.设置初始化选中项目 <small></small></h4>
			<div class="row">
				<div class="pull-right col-md-6">
					<input type="text" id="selectPage1"  class="form-control" data-init="4" >
				</div>
			</div>
            <div class="row">
                <div class="col-md-12">
                    <dl>
                        <dt>多关键字联合查询演示</dt>
                        <dd>在输入框中输入“湖 火”，两个字之间有一个半角空格，请观察在输入“湖”和“湖 火”两种情况下结果列表的展示内容。
                            当前设置了andOr : 'OR'即是希望结果集找到包含“湖”或“火”两个关键字的内容</dd>
                    </dl>
                </div>
            </div>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//data-init：设置列表初始被选中的项目，传递值为keyField对应的内容
<div class="row">
	<div class="pull-right col-md-6">
		<input type="text" id="selectPage1" data-init="4" class="form-control" >
	</div>
</div>
$('#selectPage').selectPage({
    showField : 'desc',
    keyField : 'id',
    data : tag_data,
    //多查询条件之间的“与”“或”关系
    andOr : 'OR',
    //设置结果集排序，若只指定字段，不指定排序方式，则默认使用asc升序模式
    //排序字段若不指定，则默认对showField指定的列进行升序排列
    //若需要多字段排序，则设置['id desc','name']
    //当前案例设置了使用id字段的内容进行降序排序
    orderBy : ['id desc']
});
]]>
</script>
		</div>
			
		<div class="row-fluid">
			<h4 class="heading">4.项目显示文本自定义 <small>允许根据现有数据字段进行自由组合</small></h4>
			<div class="row">
				<div class="col-md-6">
					<input type="text" id="selectPage2" class="form-control" placeholder="请输入查询关键字" >
				</div>
			</div>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
<div class="row">
	<div class="pull-right col-md-6">
		<input type="text" id="selectPage" class="form-control" >
	</div>
</div>
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	//设置每页显示记录数
	pageSize : 5,
	//格式化显示项目，提供源数据进行使用
	formatItem : function(data){
		return data.desc + '(' + data.name + ')';
	}
});
]]>
</script>
		</div>
		<div class="row-fluid">
			<h4 class="heading">5.多项选择模式 <small>以标签页模式展示多选效果，以及使用多个值进行初始化选中项目</small></h4>
            <div class="row">
                <div class="col-md-12">
                    <input type="text" id="selectPage3" class="form-control" value="7,2,3" placeholder="请输入查询关键字" >
                </div>
            </div>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
<input type="text" id="selectPage" class="form-control" value="7,2,3" placeholder="请输入查询关键字" >
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	//启用多选模式
	multiple : true
});
]]>
</script>
		</div>
		
		<div class="row-fluid">
			<h4 class="heading">6.多项选择模式限制最大选中项目 <small></small></h4>
			<input type="text" id="selectPage4" class="form-control" placeholder="请输入查询关键字" >
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	//启用多选模式
	multiple : true,
	//限制最多选中三个项目
	maxSelectLimit : 3,
	//设置选中项目后不关闭列表
	selectToCloseList : false
});
]]>
</script>
		</div>

		<div class="row-fluid">
			<h4 class="heading">7.事件回调处理 <small>项目选中后，触发的事件处理</small></h4>
			<input type="text" id="selectPage5" class="form-control" placeholder="请输入查询关键字" >
			<div id="callbackLog" class="logBox"></div>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#selectPage').selectPage({
	showField : 'desc',
	keyField : 'id',
	data : tag_data,
	multiple : true,
	//选中项目后的回调处理
	//入参：data：选中行的原始数据对象
	eSelect : function(data){
		$('#callbackLog').append(data.desc + '(' + data.name + ')<br/>');
	}
});
]]>
</script>
		</div>
		
		
		<div class="row-fluid">
			<h4 class="heading">8.Ajax请求服务端数据模式 <small>以及请求参数传递等……</small></h4>
			<input type="text" id="selectPage6" class="form-control" data-init="26521,26528" placeholder="请输入查询关键字" >
			<p style="color:red;">静态页面无法展示ajax服务端数据读取，敬请参考代码使用</p>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#selectPage5').selectPage({
	showField : 'name',
	keyField : 'id',
	data : 'http://aaa.com/load',
	params : function(){return {'name':'aa','sex':1};},
	//ajax请求后服务端返回的数据格式处理
	//返回的数据里必须包含list（Array）和totalRow（number|string）两个节点
	eAjaxSuccess : function(d){
		var result;
		if(d) result = d.values.gridResult;
		else result = undefined;
		return result;
	}
});
]]>
</script>
<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//服务端返回的JSON数据格式
//这里的示例数据，有些节点不是必须的，最重要的是list和totalRow两个节点必须存在
//所以在上面的代码中，设置了eAjaxSuccess的回调中将values.gridResult节点
//返回，因为在该节点下存在list和totalRow两个数据项
{
    "values": {
        "gridResult": {
            "pageSize": 10,
            "pageNumber": 1,
            "totalRow": 11,
            "totalPage": 2,
            "list": [
                {"name": "计算机网络","id": "1"},
                {"name": "计算机网络1","id": "2"},
				{...}
            ]
        }
    }
}
]]>
</script>
            <h4>服务端需要接收处理的参数</h4>
            <dl class="dl-horizontal ajaxDesc">
                <dt>pageNumber</dt>
                <dd>当前页号</dd>
                <dt>pageSize</dt>
                <dd>每页显示记录数</dd>
                <dt>searchTable</dt>
                <dd>查询的数据表，此字段可根据具体需求指定，默认设置'tbl'</dd>
                <dt>andOr</dt>
                <dd>插件初始化的参数，该参数会被传递到服务端，通常只有“AND”或者“OR”两种值，按需进行设置、获取</dd>
                <dt>orderBy</dt>
                <dd>排序字段，默认获得searchField指定的字段进行排序，默认排序顺序为“ASC”</dd>
                <dt>xxx</dt>
                <dd>
                    autocomplete模糊查询字段，通常该字段获取showField属性指定的字段，若在服务端用于接收的变量名与返回的字段不同，可用该字段进行接收<br>例如：
                    服务端返回的显示字段是name，则用于接收模糊查询的字段是userName，则需要在插件中设置searchField='userName'，即可完成配对
                </dd>
                <dt>searchKey</dt>
                <dd>ajax模式中用于获得初始化选中项目的查询字段，默认自动获得keyField指定的字段</dd>
                <dt>searchValue</dt>
                <dd>ajax模式中用于获得初始化选中项目的id值字段，本字段与searchKey字段组合后，可以在服务端的SQL查询中拼接出“where searchKey = searchValue”或“where searchKey in (searchValue)”</dd>
            </dl>

            <div class="row">
                <div class="col-md-12">
                <div class="col-md-5 panel panel-default" style="margin-right: 20px;">
                    <div class="panel-body">
                        <h4>ajax初始化选中值需要使用的字段 <small>服务端接收的参数</small></h4>
                        <ul>
                            <li><strong>searchKey</strong> <small>服务端查询的ID字段，进行完整匹配</small></li>
                            <li><strong>searchValue</strong> <small>具体查询的ID值，如果多个则会以“,”隔开，服务端接收后需要手动进行分割</small></li>
                            <li><strong>searchTable</strong> <small>查询表指定，通常不需要使用，作为备用字段</small></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 panel panel-default">
                    <div class="panel-body">
                        <h4>ajax读取分页数据需要使用的字段 <small>服务端接收的参数</small></h4>
                        <ul>
                            <li><strong>pageNumber</strong> <small>当前分页号</small></li>
                            <li><strong>pageSize</strong> <small>每页记录数</small></li>
                            <li><strong>searchTable</strong> <small>要查询的数据表</small></li>
                            <li><strong>xxx</strong> <small>showField或searchField指定的字段名，用于实际模糊查询的字段</small></li>
                            <li><strong>andOr</strong> <small>查询的与或条件，按需传递</small></li>
                            <li><strong>orderBy</strong> <small>排序字段，通常取自searchField</small></li>
                        </ul>
                    </div>
                </div>
                </div>
            </div>
<script type="syntaxhighlighter" class="brush:java">
<![CDATA[
//服务端处理样例（J2EE-JFinal的Controller代码）
public void loadUserList(){
    StringBuilder sb = new StringBuilder();
    List<Object> params = new ArrayList<Object>();
    if(StringUtils.isNotEmpty(getPara("userName"))){//用户姓名
        sb.append(" and name like ?");
        params.add("%" + getPara("userName") + "%");
    }
    if(StringUtils.isNotEmpty(getPara("userSex"))){//用户性别
        sb.append(" and sex = ?");
        params.add(getPara("userSex"));
    }
    if(StringUtils.isNotEmpty(getPara("userStatus"))){//用户状态
        sb.append(" and status = ?");
        params.add(getPara("userStatus"));
    }
    //用于查询初始化化值
    if(StringUtils.isNotEmpty(getPara("searchKey")) && StringUtils.isNotEmpty(getPara("searchValue"))){
        String value = getPara("searchValue");
        String[] valuearr = value.split(",");
        String searchStr = "";
        for(String val : valuearr){
            if(searchStr.length() != 0) searchStr += ",";
            searchStr += "?";
            params.add(val);
        }
        sb.append(" and " + getPara("searchKey") + " in (" + searchStr + ")" );
    }
    this.getPageInfo();
    Page<Record> plist = Db.paginate(this.getPage(),
                                     this.getPageSize(),
                                     "select *","from user where 1=1 " + sb.toString(),
                                     params.toArray());

    this.setAttr("userList", plist);
    renderJsp("/userMain.jsp");
}
]]>
</script>
            <p><span class="label label-primary">提示</span> 根据这一份服务端处理代码，就需要在插件初始化时指定searchField : "userName"，若不指定，则会默认传递"name"字段，导致服务端接收不到模糊查询的内容</p>
		</div>
		
		<div class="row-fluid">
			<h4 class="heading">9.动态修改数据源 <small>仅支持json数据源模式，ajax模式不支持动态修改</small></h4>
			<div class="row">
				<div class="col-md-5">
					<input type="text" id="selectPage7" class="form-control" placeholder="请输入查询关键字" >
				</div>
				<button type="button" class="btn btn-default" id="btnModifyDataSource"><i class="fa fa-database"></i> 修改数据源</button>
			</div>

<script type="syntaxhighlighter" class="brush:js">
<![CDATA[
var data = [
	{id:1 ,name:'北京'},{id:2 ,name:'上海'},
	{id:3 ,name:'广州'},{id:4 ,name:'深圳'},
	{id:5 ,name:'成都'},{id:6 ,name:'重庆'},
	{id:7 ,name:'福州'},{id:8 ,name:'长沙'},
	{id:9 ,name:'西安'},{id:10,name:'浙江'}
];
$('#selectPage').selectPageData(data);
]]>
</script>
		</div>
		
		
		
		
		
		
		
		
		
<!--
<div id="disqus_thread"></div>
<script>

/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://https-terryz-github-io.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-->
		
		
	</div>
	</div>





	<footer class="footer">
		<div class="container">
		<p>使用交流QQ群：136153290</p>
		Copyright © 2016-2017 Terry Zeng
		</div>
	</footer>


    


<script type="text/javascript" src="../lib/jquery.min.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJava.js" ></script>
<script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
<script type="text/javascript">
$(function(){
	SyntaxHighlighter.all();
});
</script>

<script type="text/javascript" src="../lib/selectpage/selectpage.min.js" ></script>

<script type="text/javascript" src="../js/demo.js" ></script>
<script type="text/javascript" src="../js/count.js" ></script>
</body>
</html>